<template>
  <!-- 项目评估 -->
  <div class="app-container">
    <div class="mainbox">
      <!-- 顶部操作 -->
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm">
          <el-form-item label="模板名称:" prop="tempName">
            <el-input
              v-model.trim="filterForm.tempName"
              class="filter-item limit"
              style="width: 200px;margin-right:10px"
              maxlength="30"
              clearable
              placeholder="请输入模板名称"
              @keyup.enter.native="$_handleFilter"
            />
          </el-form-item>
          <el-form-item label="创建范围:" prop="times">
            <el-date-picker
              v-model="filterForm.times"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="flex-1"></div>
        <el-button type="primary" @click="$_handleFilter">查询</el-button>
        <el-button @click="$_handleReset">重置</el-button>
      </div>
      <!-- 表格 -->
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <el-button
            v-permission="['PROJECTEVA_ADD_BUTTON']"
            type="primary"
            icon="el-icon-plus"
            @click="handleAdd"
          >
            新增
          </el-button>
          <el-button
            v-permission="['PROJECTEVA_HISTORY_BUTTON']"
            icon="el-icon-document"
            type="primary"
            @click="goto('HistoryEva')"
          >
            历史评估
          </el-button>
          <div class="flex-1" />
          <dt-dialog-column :columns="columns" @queryTable="getList" />
        </div>
        <el-table
          ref="table"
          v-loading="MX_listLoading"
          :data="MX_list"
          border
          highlight-current-row
          :row-key="$_getRowKey"
          style="width: 100%;text-align:center"
          :header-cell-style="MX_headerCellStyle"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            align="center"
            :index="$_tableIndex"
          />
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :min-width="item.minWidth"
            :formatter="item.formatter"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            :key="Math.random()"
            fixed="right"
            label="操作"
            width="240px"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                class="tBtn"
                @click="getDetail(scope.row)"
              >详情</el-button>
              <el-button
                v-permission="['PROJECTEVA_UPDATE_BUTTON']"
                size="mini"
                class="tBtn"
                @click="handleEdit(scope.row)"
              >修改</el-button>
              <el-button
                v-permission="['PROJECTEVA_EVA_BUTTON']"
                size="mini"
                class="tBtn"
                type="primary"
                @click="goto(`OneClickEva?id=${scope.row[idKeyName]}`)"
              >一键评估</el-button>
              <el-button
                v-permission="['PROJECTEVA_DEL_BUTTON']"
                size="mini"
                type="danger"
                class="tBtn"
                @click="handleDelete(scope.row[idKeyName])"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <dt-pagination
          v-show="MX_total > 0"
          :total="MX_total"
          :page.sync="MX_pageNav.pageNo"
          :limit.sync="MX_pageNav.pageSize"
          @pagination="getList"
        />
      </div>
      <DialogForm ref="dialogForm" labelWidth="140px" width="900px" :formDesignList="formDesignList" :otherParams="otherParams">
        <template slot="other" v-if="!!otherParams.indexDtos">
          <div style="text-align: right;" v-if="MX_dialogType !== 'detail'">
            <el-button type="primary" class="tBtn" @click="addIndexItem">添加指标</el-button>
          </div>
          <el-form label-width="0px">
            <el-table
              ref="table"
              :data="otherParams.indexDtos"
              border
              highlight-current-row
              :row-key="$_getRowKey"
              style="width: 100%;text-align:center"
              :header-cell-style="MX_headerCellStyle"
            >
              <template slot="empty">
                <p>暂无数据</p>
              </template>
              <el-table-column
                fixed="left"
                type="index"
                label="序号"
                width="60"
                align="center"
                :index="$_tableIndex"
              />
              <el-table-column
                v-for="item in otherFormDesignList"
                :key="item.prop"
                :prop="item.prop"
                :label="item.name"
                :width="item.width"
                align="center"
              >
                <template slot-scope="scope">
                  <template v-if="MX_dialogType === 'detail'">
                    {{ scope.row[item.prop] }}
                  </template>
                  <template v-else>
                    <el-form-item :error="!!scope.row[item.prop] ? '' : item.rules[0].message" style="margin-bottom: 0 !important;">
                      <FormTemplate :form-item="item" v-model="scope.row[item.prop]"/>
                    </el-form-item>
                  </template>
                </template>
              </el-table-column>
              <el-table-column
                v-if="MX_dialogType !== 'detail'"
                :key="Math.random()"
                fixed="right"
                label="操作"
                width="90px"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    class="tBtn"
                    @click="delIndexItem(scope.$index)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </template>
      </DialogForm>
    </div>
  </div>
</template>
<script>
import DialogForm from '@/views/investment/components/DialogForm'
import commonList from "@/utils/mixins/investment/commonList";
import intservApi from "@/api/investment/intserv";
import FormTemplate from "@/views/investment/components/FormTemplate";
import systemApi from "@/api/investment/system";

export default {
  name: 'ProjectEva',
  components: {
    DialogForm,
    FormTemplate
  },
  mixins: [commonList],
  data() {
    return {
      getDetailApi: intservApi.detailProjectEvaTemp,
      filterForm: {
        tempName: '',
        times: ''
      },
      // 列信息
      columns: [
        { prop: 'tempName', label: `模板名称`, width: '220px' },
        { prop: 'tempDescription', label: `模板描述` },
        { prop: 'createTime', label: `创建时间`, width: '220px' }
      ],
      formDesignList: [
        { type: 'text', prop: 'tempName', label: `模板名称`, rules: [{ required: true, message: '请输入模板名称', trigger: 'blur' }] },
        { type: 'textarea', prop: 'tempDescription', label: `模板描述`, maxlength: 500, autosize: {minRows: 3, maxRows: 6}, rules: [{ message: '请输入模板描述', trigger: 'blur' }] },
      ],
      idKeyName: 'id',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      otherParams: { indexDtos: [] },
      otherFormDesignList: [
        { type: 'text', prop: 'indexName', label: ``, name: '指标名称', rules: [{ required: true, message: '请输入指标名称', trigger: 'blur' }] },
        { type: 'text', prop: 'unit', label: ``, name: '计量单位', width: '130px', rules: [{ required: true, message: '请输入计量单位', trigger: 'blur' }] },
        { type: 'number', prop: 'weight', label: ``, name: '权重', width: '130px', rules: [{ required: true, message: '请输入权重', trigger: 'blur' }] },
        { type: 'text', prop: 'planValue', label: ``, name: '计划值', width: '150px', rules: [{ required: true, message: '请输入计划值', trigger: 'blur' }] },
      ],
    }
  },
  watch: {
    'filterForm.times'(val){
      this.$set(this.filterForm, 'createStartDate', !!val ? val[0] : '')
      this.$set(this.filterForm, 'createEndDate', !!val ? val[1] : '')
    }
  },
  created() {
    this.getList()
  },
  activated() {
    this.$_resetTableLayout()
  },
  methods: {
    // 获取页面列表
    getList() {
      let filterForm = JSON.parse(JSON.stringify(this.filterForm))
      filterForm.companiesCode = !!filterForm.companiesCode ? filterForm.companiesCode : []
      delete filterForm.times
      this.$_getList(intservApi.getProjectEvaTempList,{
        ...filterForm,
        ...this.MX_pageNav
      })
    },
    getDetail(data){
      this.$_handleDetail(data, this.getDetailApi, this.idKeyName, (res) => {
        this.$set(this.otherParams, 'indexDtos', res.indexDtos || [])
      }, true)
    },
    // 编辑按钮
    handleEdit(data) {
      this.$_handleDetail(data, this.getDetailApi, this.idKeyName, (res) => {
        this.$set(this.otherParams, 'indexDtos', res.indexDtos || [])
        this.$refs.dialogForm.open('update', intservApi.updateProjectEvaTempItem, res || this.MX_applicationMsg)
      })
    },
    // 添加按钮
    handleAdd() {
      this.otherParams = { indexDtos: [] }
      this.$refs.dialogForm.open('add', intservApi.addProjectEvaTempItem)
    },
    // 删除按钮
    handleDelete(id) {
      this.$_handleDelete(intservApi.delProjectEvaTemp, id, `${this.idKeyName}`)
    },
    goto(url){
      this.$router.push(`/investment/intserv/${url}`)
    },
    addIndexItem(){
      this.otherParams.indexDtos.push({
        "indexName": "",
        "planValue": "",
        "unit": "",
        "weight": 0
      });
    },
    delIndexItem(index){
      this.otherParams.indexDtos.splice(index, 1);
    },
    otherParamsCheck(){
      let flag = this.otherParams.indexDtos.length, valid = true
      this.otherParams.indexDtos.map(v => {
        let vals = Object.values(v)
        vals.map(vs => {
          if (!vs) valid = false
        })
      })
      if (!flag){
        this.$message.error(`请添加指标！`)
      }
      if (!valid){
        this.$message.error(`指标录入不完整！`)
      }
      return !!flag && !!valid
    }
  }
}
</script>

<style lang="scss" scoped>
.tBtn{
  margin-top: 3px;
  margin-bottom: 3px;
}
</style>
